<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/swiper-bundle.css" />
  <link rel="stylesheet" href="css/common.css" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/commission.css" />
  <title>海房优选</title>
</head>

<body>
  <div class="header">
    <div class="bd">
      <div class="top">
        <div class="logo">
          <a href="index.html"><img src="images/logo_1.png" alt="" /></a>
        </div>
        <div class="menu">
          <ul class="menu_list">
            <li><a href="list.html">写字楼租售</a></li>
            <li><a href="javascript:void(0)">产业园区租售</a></li>
            <li><a href="javascript:void(0)">公寓出租</a></li>
            <li><a href="javascript:void(0)">广告投放</a></li>
            <li><a href="javascript:void(0)">关于海房优选</a></li>
          </ul>
          <div class="search search_keywords">
            <dl>
              <dt><img src="images/search_1.png" alt="" /></dt>
              <dd><input type="text" placeholder="请输入关键字" /></dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="banner banner_inner">
    <dl>
      <dt><img src="images/releaseHouse/banner_1.jpg" alt="" /></dt>
      <dd>
        <div class="banner_comm">
          <h3>把您的需求告诉我</h3>
          <h3>我来帮您找到最合适的优质房源</h3>
          <h6 id="goWork">开始免费委托定制</h6>
        </div>
        <div class="banner_slogan">委托找房</div>
      </dd>
    </dl>
  </div>
  <div class="commission_intro">
    <p>
      海房优选致力于打造专业权威覆盖海淀区的房产信息媒体平台、开放智能的广告平台、阳光高效的交互平台。
      <br />
      我们以商用写字楼办公、生活民居为核心，用数字科技赋能互联网平台，帮助你我连接美好生活；
      <br />
      并通过媒体赋能、广告赋能、交互赋能为房地产行业提供领先的数据整合营销服务。
      <br />
    </p>
    <p>
      海房优选目前与全区主流媒体平台、媒介机构展开深度合作，把握移动互联网和大数据的时代脉搏。
      <br />
      成为全区开发商、经纪公司及家居企业，品牌传播和市场营销的重要合作伙伴。
      <br />
    </p>
  </div>
  <div class="commission_process">
    <div class="cp_panel">
      <div class="cp_title">服务流程</div>
      <ul class="cp_list">
        <li>
          <dl>
            <dt><img src="images/releaseHouse/sp_1.png" alt="" /></dt>
            <dd>1 填写需求信息</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt><img src="images/releaseHouse/sp_2.png" alt="" /></dt>
            <dd>2 专属顾问回访</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt><img src="images/releaseHouse/sp_3.png" alt="" /></dt>
            <dd>3 定制选址方案</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt><img src="images/releaseHouse/sp_4.png" alt="" /></dt>
            <dd>4 实地看房签约</dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="commission_statistics">
    <div class="cs_panel">
      <ul class="cs_list">
        <li>
          <dl>
            <h3>807</h3>
            <h4>写字楼</h4>
            <p>覆盖全区，海量实勘真房源</p>
          </dl>
        </li>
        <li>
          <dl>
            <h3>629</h3>
            <h4>产业园区</h4>
            <p>覆盖全区，海量实勘真房源</p>
          </dl>
        </li>
        <li>
          <dl>
            <h3>393</h3>
            <h4>公寓</h4>
            <p>覆盖全区，海量实勘真房源</p>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  <div class="foot">
    <div class="bd">
      <div class="foot_box">
        <div class="foot_panel">
          <div class="fp_left">
            <dl>
              <dt><img src="images/logo_2.png" alt="" /></dt>
              <dd>
                <h3>客服电话</h3>
                <h5>4008-666-888</h5>
              </dd>
            </dl>
          </div>
          <div class="fp_right">
            <dl>
              <dt><img src="images/code_1.png" alt="" /></dt>
              <dd><img src="images/code_2.png" alt="" /></dd>
            </dl>
          </div>
        </div>
        <div class="copyright">
          ©2025 北京海房优选房地产经纪有限公司 京ICP备20025040号-1 京公网安备
          11010502040384号 京经纪（2015）第8360号
        </div>
      </div>
    </div>
  </div>
  <div class="pop">
    <div class="pop_panel pop_panel_relation">
      <div class="pop_relation">
        <h3 class="po_title">提交您的联系方式</h3>
        <ul class="po_tabs" id="po_relation">
          <li>个 人</li>
          <li>公 司</li>
        </ul>
        <div class="po_form">
          <form action="">
            <dl>
              <p>
                <input type="text" id="name" placeholder="">
              </p>
            </dl>
            <dl>
              <p>
                <input type="text" id="phone" placeholder="请输入手机号">
              </p>
            </dl>
            <dl>
              <p>
                <input type="text" placeholder="验证码">
                <span id="code">获取验证码</span>
              </p>
            </dl>
            <dl class="po_submit">
              <p id="submit">
                <a href="javascript:void(0)">验证手机号码</a>
              </p>
            </dl>
          </form>
        </div>
        <div class="close"></div>
      </div>
    </div>
    <div class="pop_panel pop_panel_purchase">
      <div class="pop_purchase">
        <h3 class="po_title">提交您要租赁/购买的房产信息</h3>
        <ul class="po_tabs" id="po_purchase">
          <li>租 赁</li>
          <li>购 买</li>
        </ul>
        <div class="po_form">
          <form action="">
            <div class="po_form_item">
              <h3>房产类型</h3>
              <h5>
                <span>写字楼</span>
                <span>产业园区</span>
                <span>公寓</span>
              </h5>
            </div>
            <div class="po_form_item">
              <h3>地区</h3>
              <h5>
                <span>海淀</span>
                <span>中关村</span>
                <span>花园路</span>
                <span>学院路</span>
                <span>清华园</span>
                <span>燕 园</span>
                <span>西三旗</span>
                <span>上 地</span>
                <span>永定路</span>
                <span>万寿路</span>
                <span>甘家口</span>
                <span>八里庄</span>
                <span>紫竹院</span>
                <span>北太平庄</span>
                <span>其他</span>
              </h5>
            </div>
            <div class="po_form_item">
              <h3>面积(m<sup>2</sup>)</h3>
              <h5>
                <span>60以下</span>
                <span>60-80</span>
                <span>80-120</span>
                <span>120-200</span>
                <span>200-300</span>
                <span>300-500</span>
                <span>500-800</span>
                <span>800以上</span>
              </h5>
            </div>
            <div class="po_form_item">
              <h3>价格(元/月)</h3>
              <h5>
                <span>3000-5000</span>
                <span>5000-8000</span>
                <span>8000-12000</span>
                <span>12000-15000</span>
                <span>15000-18000</span>
                <span>18000以上</span>
              </h5>
            </div>
            <div class="po_form_item">
              <div class="po_form_textarea">
                <textarea name="" id="" placeholder="详情说明(50个字以内)"></textarea>
              </div>
            </div>
            <div class="po_submit">
              <p id="submit_form">
                <a href="javascript:void(0)">提交</a>
              </p>
            </div>
          </form>
        </div>
        <div class="close"></div>
      </div>
    </div>
  </div>
</body>

<script src="js/jquery.js"></script>
<script src="js/swiper-bundle.js"></script>
<script src="js/fun.js"></script>
<script>
  $(function () {
    var timer = null;
    var max = 5;
    $('#po_relation li').click(function () {
      let idx = $('#po_relation li').index($(this))
      $(this).addClass('on').siblings().removeClass('on')
      idx === 0 ? $('#name[placeholder]').attr('placeholder', '您的姓名') : $('#name[placeholder]').attr('placeholder', '企业名称')
    })
    $('#po_relation li').eq(0).click()

    $('#code').click(function () {
      startCountTimer()
    })

    $('.close').click(function () {
      $('.pop').fadeOut().find('.pop_panel').fadeOut()
    })

    $('#goWork').click(function () {
      $('.pop').fadeIn().find('.pop_panel_relation').fadeIn().siblings('.pop_panel_purchase').hide()
    })

    $('#submit').click(function () {
      $('.pop').fadeIn().find('.pop_panel_relation').hide().siblings('.pop_panel_purchase').fadeIn()
    })

    $('#po_purchase li').click(function () {
      let idx = $('#po_purchase li').index($(this))
      $(this).addClass('on').siblings().removeClass('on')
    })
    $('#po_purchase li').eq(0).click()


    $('.po_form_item h5 span').click(function () {
      $(this).toggleClass('on').siblings().removeClass('on')
    })

    $('#submit_form').click(function () {
      alert('已提交')
      location.reload()
    })

    function startCountTimer() {
      timer = setInterval(() => {
        max--
        if (max === 0) {
          $('#code').text(`获取验证码`)
          clearInterval(timer)
          return
        }
        $('#code').text(`${max}秒`)
      }, 1000)
    }
  });
</script>

</html>